<template>
  <div class="form-custom-list">
    <el-button v-if="handleType !== 'scan'" type="primary" size="mini" @click="openAdd">增加要点</el-button>
    <div class="list">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="idName" label="办理环节"></el-table-column>
        <el-table-column prop="mrpDetails" label="审核要点"></el-table-column>
        <el-table-column prop="操作" label="操作" v-if="handleType !== 'scan'">
          <template slot-scope="scope">
            <el-button @click="reduce(scope.$index)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="item" v-for="(item, index) in list" :key="index">
        <span class="name" :title="item.mrpDetails">{{ item.idName }}</span>
        <span class="name" :title="item.mrpDetails">{{ item.mrpDetails }}</span>
        <span class="el-icon-circle-close" @click="reduce(index)"></span>
      </div> -->
    </div>
    <el-dialog
      title="审核要点"
      width="800px"
      custom-class="gov-application-materials-add"
      :modal-append-to-body="false"
      :append-to-body="true"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="gov-dynamic-form">
        <el-button style="margin-bottom: 10px" @click="addItem" type="primary" icon="el-icon-circle-plus">
          增加审核要点
        </el-button>
        <div class="form-item-wrapper" v-for="(item, index) in formItemData" :key="item.eicCode">
          <div class="form-item">
            <div class="form-item-content">
              <div class="form-item-content__label" :class="{ 'form-item-content__error': !rules[item.eicCode] }">
                {{ item.eicName }}
                <span class="promet" v-if="item.eicFillRule === 'Y'">(*)</span>
              </div>
              <div class="form-item-content__input">
                <el-input
                  v-if="item.eicType === 'input'"
                  v-model="form[item.eicCode]"
                  maxlength="255"
                  placeholder="请输入审核要点"
                ></el-input>
                <el-button
                  v-if="item.eicType === 'input' && index > 1"
                  @click="removeItem(index)"
                  type="primary"
                  icon="el-icon-remove"
                ></el-button>
                <radio
                  v-if="item.eicType === 'radio_short'"
                  @selectChange="radioChange"
                  :action="item"
                  :selected="form[item.eicCode]"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSubmitHanlde">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios';
  import radio from './radio';
  export default {
    components: { radio },
    props: {
      action: {
        type: Object,
        default: () => {
          return {};
        }
      },
      selected: {
        type: Array,
        default: () => {
          return [];
        }
      },
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String
      }
    },
    data() {
      return {
        list: [],
        visible: false,
        form: {
          id: '',
          mrpDetails: ''
        },
        formItemData: [
          {
            id: 0,
            eicName: '办理环节',
            eicType: 'radio_short',
            eicLength: 255,
            eicOrder: 1,
            eicFillRule: 'Y',
            eicCode: 'id'
          },
          {
            id: 1,
            eicName: '审核要点',
            eicType: 'input',
            eicLength: 255,
            eicOrder: 2,
            eicFillRule: 'Y',
            eicCode: 'mrpDetails'
          }
        ],
        rules: {
          id: true,
          mrpDetails: true
        },
        businessTache: []
      };
    },
    watch: {
      visible: {
        handler(val) {
          if (!val) {
            this.rules = {};
            this.form = {};
            this.$set(this.rules, 'id', true);
            this.$set(this.rules, 'mrpDetails', true);
            this.$set(this.form, 'id', '');
            this.$set(this.form, 'mrpDetails', '');
            this.formItemData = this.formItemData.slice(0, 2);
          }
        }
      },
      selected: {
        async handler(val) {
          if (this.businessTache.length === 0) {
            await this.init();
          }
          const list = JSON.parse(JSON.stringify(this.selected));
          this.list = list
            .map((item) => {
              const isExist = this.businessTache.find((e) => {
                return e.businessTacheId == item.businessTacheId;
              });
              return {
                id: isExist.businessTacheId,
                idName: isExist.businessTacheName,
                mrpDetails: item.mrpDetails
              };
            })
            .sort((a, b) => {
              return a.id - b.id;
            });
        }
      }
    },
    computed: {},
    methods: {
      openAdd() {
        this.visible = true;
        // this.$prompt('请输入审核要点详情', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消'
        // })
        //   .then(({ value }) => {
        //     this.list.push({
        //       mrpDetails: value
        //     });
        //     this.selectChange();
        //   })
        //   .catch(() => {});
      },
      addItem() {
        let eicCode = `mrpDetails_${new Date().getTime()}`;
        this.formItemData.push({
          eicName: '审核要点',
          eicType: 'input',
          eicLength: 255,
          eicOrder: 2,
          eicFillRule: 'Y',
          eicCode
        });
        this.$set(this.form, eicCode, '');
        this.$set(this.rules, eicCode, true);
      },
      removeItem(index) {
        const item = this.formItemData[index];
        this.formItemData.splice(index, 1);
        delete this.form[item.eicCode];
        delete this.rules[item.eicCode];
      },
      reduce(index) {
        this.list.splice(index, 1);
        this.selectChange();
      },
      selectChange() {
        const list = this.list
          .map((e) => {
            return {
              businessTacheId: e.id,
              mrpDetails: e.mrpDetails
            };
          })
          .sort((a, b) => {
            return a.businessTacheId - b.businessTacheId;
          });
        this.$emit('selectChange', { eicCode: this.action.eicCode, value: list });
      },
      async init() {
        const res = await axios.get('/api/v1/business/link/list');
        const { data } = res;
        if (data.success) {
          this.businessTache = data.result || [];
          this.formItemData[0].tags = this.businessTache.map((e) => {
            return {
              item_value: e.businessTacheId,
              item_text: e.businessTacheName
            };
          });
        }
      },
      radioChange(obj) {
        this.form[obj.eicCode] = obj.value;
      },
      handleClose() {
        this.visible = false;
      },
      addSubmitHanlde() {
        // 验证
        let valid = true;
        const { id } = this.form;
        for (let key in this.form) {
          if (!this.form[key]) {
            this.rules[key] = false;
            valid = false;
          } else {
            this.rules[key] = true;
          }
        }

        if (valid) {
          const item = this.businessTache.find((e) => {
            return e.businessTacheId == id;
          });

          for (let key in this.form) {
            if (key.indexOf('mrpDetails') > -1) {
              this.list.push({
                id: item.businessTacheId,
                idName: item.businessTacheName,
                mrpDetails: this.form[key]
              });
            }
          }

          this.handleClose();
          this.selectChange();
        } else {
          this.$message.error('请按照要求标红的字段');
        }
      }
    },
    created() {},
    mounted() {
      this.init();
    }
  };
</script>
<style lang="scss">
  .form-custom-list {
    padding: 10px;
    width: 100%;
    .list {
      margin-top: 10px;
      .item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .name {
          margin-right: 40px;
        }
      }
    }
  }
</style>
